<template>
	<view>
		<view class="is-login"></view>
		<view class="from-view-pc">
			<view class="title-view">
				<view class="row">
					<view class="title-text">登录</view>
					<view class="title-desc">
						<view>NUOZHONG</view>
						<view style="margin-top: -2px;">Login</view>
					</view>
				</view>
				<image src="/static/pc/logo-icon.png" class="logo-css"></image>
			</view>

			<view class="form-item">
				<view class="form-label">
					<view>手</view>
					<view>机</view>
					<view>号</view>
				</view>
				<view class="division"></view>
				<view class="form-content">
					<input type="text" value="" placeholder="请输入手机号" class="input-css" placeholder-class="plac-css" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<view>密</view>
					<view>码</view>
				</view>
				<view class="division"></view>
				<view class="form-content">
					<input type="text" value="" placeholder="请输入密码" class="input-css" placeholder-class="plac-css" />
				</view>
			</view>
			<view style="height: 34px;"></view>
			<view class="button-view-pc button-primary">登录</view>
			<navigator url="/pages/register/register" hover-class="none" class="button-view-pc">立即注册</navigator>
			<navigator url="/pages/forgetPassword/forgetPassword" hover-class="none" class="button-view-pc button-text">
				忘记密码？</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.is-login {
		height: 238px;
	}

	.from-view-pc {
		width: 524px;
		padding: 37px 50px;
		background: #FFFFFF;
		margin-right: 192px;
		position: relative;
		z-index: 2;

		.title-view {
			width: 100%;
			margin-bottom: 38px;
			@extend .row-between;

			.title-text {
				font-weight: 600;
				font-size: 34px;
				color: #470300;
				margin-right: 6px;
			}

			.title-desc {
				font-size: 14px;
				color: #470300;
			}

			.logo-css {
				width: 152px;
				height: 30px;
			}
		}

		.form-item {
			width: 100%;
			padding: 18px 29px;
			background: #F6F6F6;
			border-radius: 31px;
			@extend .row-between;

			.form-label {
				width: 77px;
				@extend .row-between;
				font-size: 19px;
				color: #470300;
			}

			.division {
				width: 1px;
				height: 18px;
				background: #470300;
			}

			.form-content {
				width: calc(100% - 77px - 30px);

				.input-css {
					font-size: 19px;
				}

				.plac-css {
					font-size: 19px;
					color: #969595;
				}
			}
		}

		.form-item+.form-item {
			margin-top: 14px;
		}

		.button-view-pc {
			width: 100%;
			height: 62px;
			@extend .column;
			background: #FFFFFF;
			border-radius: 31px;
			border: 1px solid #FF453B;
			font-size: 22px;
			color: #FF453B;
		}

		.button-primary {
			background: #FF453B;
			color: white;
		}

		.button-text {
			height: initial;
			border: none;
			background: #FFFFFF;
		}

		.button-view-pc+.button-view-pc {
			margin-top: 14px;
		}

		.button-view-pc+.button-text {
			margin-top: 24px;
		}
	}

	@media only screen and (max-width: 908px) {
		.from-view-pc {
			margin-right: 0;
		}
	}

	@media only screen and (max-width: 584px) {
		.from-view-pc {
			width: calc(100vw - 60px);
		}
	}
</style>